import React, { Component } from 'react'
import UpImgLoad from '../components/UploadImg'
import '../assets/style/findNewHouse.less'
import SelectOptions from '../components/selectOptions'
import ModelType from '../components/modelType'
import Input from '../components/Input'
import Tag from '../components/Tags'
import { NavBar, Icon, NoticeBar, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux'
import { saveHouseData } from '../redux/redux_actions'
import store from '../redux/reduers';
import ReactPayLayer from "react-pay-layer";
const seasons = [
    [{
        label: '一室',
        value: '一室',
    },
    {
        label: '二室',
        value: '二室',
    },
    {
        label: '三室',
        value: '三室',
    }],
    [{
        label: '一厅',
        value: '一厅',
    },
    {
        label: '二厅',
        value: '二厅',
    },
    {
        label: '三厅',
        value: '三厅',
    }],
    [{
        label: '一卫',
        value: '一卫',
    },
    {
        label: '二卫',
        value: '二卫',
    },
    {
        label: '三卫',
        value: '三卫',
    }],
];
const seasons1 = [
    {
        label: '春',
        value: '春',
    },
    {
        label: '夏',
        value: '夏',
    },
    {
        label: '秋',
        value: '秋',
    },
    {
        label: '冬',
        value: '冬',
    },
];
const seasons2 = [
    {
        label: '秋',
        value: '秋',
    },
    {
        label: '冬',
        value: '冬',
    },
];
 class findNewHouse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cols: 1,
            housevisible: false,
            houseTypedata: [
                {
                    label: '2013',
                    value: '2013',
                },
                {
                    label: '2014',
                    value: '2014',
                },
            ],
            reginvisible: false,
            regindata: [
                {
                    label: '2013',
                    value: '2013',
                },
                {
                    label: '2014',
                    value: '2014',
                },
                {
                    label: '2015',
                    value: '2015',
                },
            ],
            pickerValue: [],
            asyncValue: [],
            visible: false,
            renovationvisible: false,
            renovationdata: [
                [
                    {
                        label: '一室',
                        value: '一室',
                    },
                    {
                        label: '二室',
                        value: '二室',
                    },
                    {
                        label: '三室',
                        value: '三室',
                    },
                ],
                [
                    {
                        label: '一厅',
                        value: '一厅',
                    },
                    {
                        label: '二厅',
                        value: '二厅',
                    },
                    {
                        label: '三厅',
                        value: '三厅',
                    },
                ],
                [
                    {
                        label: '一卫',
                        value: '一卫',
                    },
                    {
                        label: '二卫',
                        value: '二卫',
                    },
                    {
                        label: '三卫',
                        value: '三卫',
                    },
                ],

            ],
            Imgfile:[],
            village: "",
            houseType: '',
            regin: "",
            renovation: "",
            area: "",
            price: "",
            tags: [],
            title: "",
            describe: "",
            linker: "",
            infloor: "",
            numfloor: "",
            titles: "",
            acceptstatus: false,
            showstatus: false,
            player: "",
           
        }
    }
    componentWillMount() {
        // if (this.props.location.state) {
        //     this.setState({
        //         village: this.props.location.state.name
        //     })
        // }
    }

     componentDidMount() {
         let data= store.getState().houseData
         this.setState({
             ...data
        })
        // console.log(store.getState(), 'store');
    }

    onOk = (v, type, visible) => {
        this.setState({
            [visible]: !this.state[visible],
            [type]: v.join('')
        })
    }
    onFocus = (event, href, type) => {
        if (href) {
            let data = {
                Imgfile: this.state.Imgfile,
                village: this.state.village,
                houseType: this.state.houseType,
                regin: this.state.regin,
                renovation: this.state.renovation,
                area: this.state.area,
                price: this.state.price,
                tags: this.state.tags,
                describe: this.state.describe,
                linker: this.state.linker,
                infloor: this.state.infloor,
                numfloor: this.state.numfloor,
                titles: this.state.titles,
                acceptstatus: this.state.acceptstatus
            }
            this.props.saveHouseData(data)
            this.props.history.push(href)
        } else {
            this.setState({
                [type]: !this.state[type]
            })
        }
    }
    onBlur = (event, key) => {
        this.setState({
            [key]: event.target.value
        })
    }
    getData = (val, status) => {
        if (status) {
            this.state.tags.push(...val)
        } else {
            let index = this.state.tags.indexOf(...val)
            this.state.tags.splice(index, 1)
        }
    }
    getImg = (value) => {
        this.setState({
            Imgfile: value
        })
    }
     handlerSub = () => {
         let data = {
             Imgfile: this.state.Imgfile,
             village: this.state.village,
             houseType: this.state.houseType,
             regin: this.state.regin,
             renovation: this.state.renovation,
             area: this.state.area,
             price: this.state.price,
             tags: this.state.tags,
             describe: this.state.describe,
             linker: this.state.linker,
             infloor: this.state.infloor,
             numfloor: this.state.numfloor,
             titles: this.state.titles,
             acceptstatus: this.state.acceptstatus
         }
         this.setState({
            showstatus:!this.state.showstatus
        })
         console.log(data);
     }
     onRef = (e) => {
         this.state.player=e
         console.log(e);
     }
     handleClose = () => {
         this.setState({
             showstatus: !this.state.showstatus
         })
     }
     inputEnd = (val) => {
         console.log(val);
         this.state.player.success().then(res => {
             console.log("支付成功");
         });
     }
     forgetClickEvent = () => {
         console.log(222);
     }
     change = (event, key) => {
         this.setState({
             [key]: event.target.value
         })
     }
     render() {
        return (
            <div className="subscribeNewHouse">
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.go(-1)}
                >二手房出售</NavBar>
                <NoticeBar mode="F5DEE4" icon={<svg t="1627304024791" className="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1970" width="20" height="20">
                    <path
                        d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512z m0-938.666667c-234.666667 0-426.666667 192-426.666667 426.666667s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667-192-426.666667-426.666667-426.666667z m0 725.333334c-25.6 0-42.666667-17.066667-42.666667-42.666667v-298.666667c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v298.666667c0 21.333333-17.066667 42.666667-42.666667 42.666667z m0-567.466667c25.6 0 46.933333 21.333333 46.933333 46.933333s-21.333333 46.933333-46.933333 46.933334-46.933333-21.333333-46.933333-46.933334 21.333333-46.933333 46.933333-46.933333z"
                        p-id="1971" fill="#E0898E"></path>
                </svg>}>
                    发布本条信息将收费十元。
                </NoticeBar>
                <UpImgLoad getImg={this.getImg} ImgUrl={this.state.Imgfile}  ></UpImgLoad>
                <WhiteSpace size='md' />
                <SelectOptions horizontal="horizontal" placeholder="请选择小区" onClick={() => this.onFocus('_', "/searchVillage") } onFocus={(event) => this.onFocus(event, "/searchVillage")} title="小区" value={this.state.village} {...this.props} ></SelectOptions>
                <SelectOptions title="房产类型" {...this.props}
                    horizontal="horizontal"
                    data={this.state.houseTypedata}
                    cols={this.state.cols}
                    value={this.state.houseType}
                    onOk={(v) => this.onOk(v, 'houseType', "housevisible")}
                    visible={this.state.housevisible}
                    onFocus={(event) => this.onFocus(event, undefined, 'housevisible')}
                    cascade={true}
                    placeholder="请选择"
                    onClick={() => this.setState({
                        housevisible: !this.state.housevisible
                    })}
                    onDismiss={() => this.setState({
                        housevisible:!this.state.housevisible
                    })}
                ></SelectOptions>
                <SelectOptions title="区域" {...this.props}
                    horizontal="horizontal"
                    className="reginstyle"
                    data={this.state.regindata}
                    cols={this.state.cols}
                    cascade={true}
                    value={this.state.regin}
                    onOk={(v) => this.onOk(v, 'regin', 'reginvisible')}
                    visible={this.state.reginvisible}
                    onFocus={(event) => this.onFocus(event, undefined, 'reginvisible')}
                    placeholder="请选择"
                    onDismiss={() => this.setState({
                        reginvisible: !this.state.reginvisible
                    })}
                    onClick={() => this.setState({
                        housevisible: !this.state.housevisible
                    })}
                ></SelectOptions>
                <WhiteSpace size='sm' />
                <ModelType
                    title="户型|朝向|装修"
                    horizontal="horizontal"
                    {...this.props}
                    value={this.state.renovation}
                    onFocus={(event) => this.onFocus(event, undefined, 'renovationvisible')}
                    placeholder="请选择"
                    onOk={(v) => this.onOk(v, 'renovation', 'renovationvisible')}
                    seasons1={seasons1}
                    seasons={seasons}
                    seasons2={seasons2}
                ></ModelType>
                <div className="floor">
                    <Input type='number' start="所在楼层" value={this.state.infloor}  onBlur={(event) => this.onBlur(event, 'infloor')}   placeholder="请填写" end="层"></Input>
                    <Input type='number' start="共" value={this.state.numfloor}  onBlur={(event) => this.onBlur(event, 'numfloor')}  placeholder="请填写" end="层"></Input>
                </div>
                <WhiteSpace size='md' />
                <SelectOptions title="面积" {...this.props}
                    value={this.state.area}
                    onBlur={(event) => this.change(event, 'area')}
                    placeholder="请输入"
                    end="m²"
                   type='number'
                ></SelectOptions>
                <SelectOptions title="售价" {...this.props}
                    value={this.state.price}
                    onBlur={(event) => this.change(event, 'price')}
                    placeholder="请输入"
                    end="万元"
                    className="reginstyle"
                    type='number'
                ></SelectOptions>
                <WhiteSpace size='md' />
                <div className="tags">
                    <div className="tags_title">标签</div>
                    <div className="tags_content">
                        <Tag name="tags" value="新上房源" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="小户型" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="有电梯" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="优质教育" data={this.state.tags} getData={this.getData}></Tag>
                    </div>
                    <div className="tags_content1">
                        <Tag name="tags" value="低总价" data={this.state.tags} getData={this.getData} style={{margin:"2px 2px 10px" }}  ></Tag>
                        <Tag name="tags" value="满两年" data={this.state.tags} getData={this.getData}  style={{ margin: "2px 2px 10px" }} ></Tag>
                        <Tag name="tags" value="满五年" data={this.state.tags} getData={this.getData} style={{ margin: "2px 2px 10px" }}  ></Tag>
                        <Tag name="tags" value="随时看房" data={this.state.tags} getData={this.getData} style={{ margin: "2px 2px 10px" }}  ></Tag>
                        <Tag name="tags" value="满五唯一" data={this.state.tags} getData={this.getData} style={{ margin: "2px 2px 10px" }}  ></Tag>
                    </div>
                </div>
                <WhiteSpace size='md' />
                <SelectOptions title="标题" {...this.props}
                    value={this.state.titles}
                    onBlur={(event) => this.change(event, 'titles')}
                    placeholder="请输入"
                    horizontal="horizontal"
                   
                ></SelectOptions>
                <SelectOptions title="描述" {...this.props}
                    value={this.state.describe}
                    onBlur={(event) => this.change(event, 'describe')}
                    placeholder="请输入"
                    className="reginstyle"
                    horizontal="horizontal"
                   
                ></SelectOptions>
                <WhiteSpace size='md' />
                <SelectOptions title="联系人" {...this.props}
                    value={this.state.linker}
                    onBlur={(event) => this.change(event, 'linker')}
                    placeholder="请输入"
                    className="reginstyle"
                    horizontal="horizontal"
                   
                ></SelectOptions>
                <WhiteSpace size='md' />
                <div className="houseBottom">
                    <div className="houseBottomTitle">
                        有效时间
                    </div>
                    <div className="timesdata">
                        <span>30天</span>
                    </div>
                    <div className="subscribe">
                        <div className="sunscribe_content">
                            <Input type="checkbox" checked={this.state.acceptstatus} className="content_input" onClick={()=>this.setState({
                                acceptstatus: !this.state.acceptstatus
                            })}  value={this.state.acceptstatus} ></Input>
                            已阅读并接受《宏烨找房房源信息发布规则》
                        </div>
                        <div className="btn_suscribe"  onClick={this.handlerSub}>发布</div>
                    </div>
                </div>
                {
                    this.state.showstatus ? <ReactPayLayer
                        onRef={this.onRef}
                        handleClose={this.handleClose}
                        forgetClickEvent={this.forgetClickEvent}
                        inputEnd={this.inputEnd}
                    />:null
                }
            </div>
        )
    }
}
export default connect(state => state.houseData, { saveHouseData })(findNewHouse)